<template>
  <div class="tz">
    <div class="exampletwo" style="display: flex;">
      <van-image style="padding: 3px;padding-left: 10px" round width="1.2rem" height="1.2rem"
        src="https://cdn.uviewui.com/uview/album/1.jpg" />
      <van-tag type="primary" size="large">欢迎回家,请先点击校验按钮.</van-tag>
    </div>
    <van-steps direction="vertical" :active="this.jd">
      <van-step>
        <h3>等待用户操作中</h3>
      </van-step>
      <van-step>
        <h3>【步骤一】发送短信验证</h3>
        <p>滴滴校验</p>
      </van-step>
      <van-step>
        <h3>【步骤二】开始校验算法</h3>
        <p>滴滴校验</p>
      </van-step>
    </van-steps>
    <div style="display:flex;text-align: center;margin-top: 10px;">
      <van-field v-model="phone" label="手机号码:" placeholder="请输入手机号码" style="width: 100%;" />
    </div>
    <van-field v-model="sms" center clearable label="短信验证码:" placeholder="请输入滴滴短信验证码">
      <template #button>
        <van-button size="small" type="info" @click="sendSmsButton">发送短信验证码</van-button>
      </template>
    </van-field>
    <div style="padding-left: 15px;width: 92%;">
      <van-button round block type="info" @click="check">开始校验(每天手动校验一次)</van-button>
    </div>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="comment-o">日志</van-tabbar-item>
      <van-tabbar-item icon="volume-o">通知</van-tabbar-item>
      <van-tabbar-item icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      active: 3,
      jd: 0,
      phone: "",
      sms: "",

      sendSmsInfo: {
        phone: this.phone,
      },
      checkInfo: {
        phone: this.phone,
        code: "",
      },
    };
  },
  created() {
    this.phone = this.$route.query.phone;
  },
  methods: {
    sendSmsButton() {
      this.jd = 1;
    this.sendSmsInfo.phone = this.phone;
      axios
        .get("http://123.60.46.49:8080/login/sendSms", {
          params: this.sendSmsInfo,
        })
        .then((res) => {
          if (res.data.code === 500) {
            this.$message.error("服务未启动或奔溃请联系客户.");
          } else {
            this.$message({
              message: res.data.message,
              type: "success",
            });
          }
        });
    },
    check() {
      this.jd = 2;
      this.checkInfo.code = this.sms;
      this.checkInfo.phone = this.phone;
      axios
        .get("http://123.60.46.49:8080/login/check", { params: this.checkInfo })
        .then((res) => {
          if (res.data.code === 500) {
            this.$message.error("服务未启动或奔溃请联系客户.");
          } else {
            this.$message({
              message: res.data.message,
              type: "success",
            });
          }
        });
    },
    onChange(index) {
      if (index === 0) {
        this.$router.push("/home?phone=" + this.phone);
      }
      if (index === 1) {
        this.$router.push("/log?phone=" + this.phone);
      }
      if (index === 2) {
        this.$router.push("/tz?phone=" + this.phone);
      }
    },
  },
};
</script>
<style>
.exampletwo {
  background-color: rgb(22, 136, 241);
  color: rgb(255, 255, 204);
}

.div_class {
  margin-top: -25px;
}

#user-page a,
#user-page a div {
  display: flex;
  align-items: center;
}

#user-page a {
  background-color: #f8f3f3;
  justify-content: space-between;
  padding: 3px;
  font-size: 0.9rem;
  border-bottom: 0.05rem solid #e9e9e9;
}

#user-content img {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

#user-page a,
#user-page a div {
  display: flex;
  align-items: center;
}

#user-page a p {
  margin-left: 0.5rem;
}

#user-page a img:last-child {
  width: 1rem;
  height: 1rem;
}

.mar-top {
  margin-top: 10px;
}
</style>